<template>
	<div>

		<div class="page">
			<span class="el-icon-caret-left page-li" @click="pageactive(ispageactive-1)"></span>
			<span class="page-li" v-if="ispageactive!=1&&ispageactive!=2">...</span>
			<span class="page-li" v-for="pi in pageslist" v-if="pi==ispageactive||pi==ispageactive-1||pi==ispageactive+1" :class="{active:ispageactive===pi}"
			 @click="pageactive(pi)">{{pi}}</span>
			<span class="page-li" v-if="ispageactive!=pages">...</span>
			<span class="el-icon-caret-right page-li" @click="pageactive(ispageactive+1)"></span>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		props: ['page'],
		data() {
			return {
				ispageactive: 1,
				pages: 0,
				pageslist: []
			}
		},
		computed: {

		},
		mounted() {
			this.pages = Math.ceil(this.page.total / this.page.per_page)
			for (var i = 0; i < this.pages; i++) {
				this.pageslist.push(i + 1)
			}
			this.ispageactive = this.page.current_page
		},
		methods: {
			pageactive(res) {
				if (res > this.pages) {
					res = this.pages;
					this.ispageactive = res;
					this.$alert('已经是最后一页啦！', '提示', {confirmButtonText: '确定',});
					return
				}
				if (res < 1) {
					res = 1;
					this.ispageactive = res;
					this.$alert('已经是第一页啦！', '提示', {confirmButtonText: '确定',});
					return

				}
				this.ispageactive = res;
				this.$parent.getpagelist(res)
			},
		},
		watch: {
			page(newValue, oldValue) {
				this.pages = Math.ceil(newValue.total / newValue.per_page)
				this.ispageactive = newValue.current_page;
				this.pageslist=[]
				for (var i = 0; i < this.pages; i++) {
					this.pageslist.push(i + 1)
				}
			}
		},
	}
</script>

<style lang="less">
	.page {
		width: 100%;
		padding: 50px 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #00ccff;
		font-size: 14px;
		cursor: pointer;

		.page-li {
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;

			&.active {
				background: #ff6600;
				color: #fff;
			}
		}
	}
</style>
